/* styles.css */
body, html {
	margin: 0;
	padding: 0;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #f0f0f0; /* 灰色背景，以突显白色矩形 */
}

.centered-rectangle {
	background-color: #ffffff; /* 白色背景 */
	padding: 0px; /* 内边距，可根据需求调整 */
	margin-bottom: 100px;
	border-radius: 8px; /* 圆角边框，使矩形更显柔和 */
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果，增加立体感 */
	text-align: center; /* 文本居中 */
	width: 350px; /* 矩形宽度，可根据需求调整 */
	height: 480px; /* 矩形宽度，可根据需求调整 */
}
.avatar-container {
    display: inline-block;
    border-radius: 50%; /* 圆形边框 */
    overflow: hidden; /* 隐藏溢出的部分 */
	width: 80px; /* 头像宽度，可以根据需要调整 */
	height: 80px; /* 头像高度，与宽度保持一致以形成圆形 */
	position: relative;
	top: -50px;
    border: 3px solid #ffffff; /* 边框颜色和宽度，可以根据需要调整 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果，可以根据需要调整 */
	background-color: #ffe38f;
}
 
.avatar {
    width: 60px; /* 头像宽度，可以根据需要调整 */
    height: 60px; /* 头像高度，与宽度保持一致以形成圆形 */
    object-fit: cover; /* 保持图像比例，裁剪以适应容器 */
	position: relative;
	top: 10px;
    border-radius: 50%; /* 圆形头像 */
}
.avatar-text {
    text-align: center; /* 根据需要调整文本对齐方式 */
    margin-top: -30px; /* 添加一些外边距以增加空间 */
}
.avatar-text p {
    margin: 0; /* 移除段落默认的上下边距 */
    font-size: 35px; /* 设置字体大小 */
    font-weight: 550; /* 可选：设置字体加粗 */
}

.contact-info {
    display: flex; /* 使用flex布局来水平排列图标和手机号 */
    justify-content: center; /* 水平居中 */
    margin-top: 10px; /* 添加一些上边距以分隔内容 */
}

.contact-info img {
    width: 15px;
	height: 15px;
	margin-top: 2px; /* 添加一些上边距以分隔内容 */
}

.contact-info .phone-number {
	 margin-left: 6px; /* 添加一些上边距以分隔内容 */
    font-size: 14px; /* 设置手机号字体大小 */
	font-family: 'Microsoft YaHei', sans-serif; /* 指定微软雅黑字体 */
}
.centered-div{
	position: relative;
	top: 20px;
	/* 可选：设置一些额外的样式，如字体大小 */
	font-size: 14px;
	/* 如果需要背景色或其他样式，也可以在这里添加 */
	display: flex;
	color: #b9b6b6;
	justify-content: center; /* 水平居中 */
	align-items: center; /* 垂直居中 */
	font-family: 'Microsoft YaHei', sans-serif; /* 指定微软雅黑字体 */
}
.icon-container {
 display: flex;
 flex-wrap: wrap;
 margin-top: 50px;
 gap: 10px;
 justify-content: center;
}

.icon-wrapper {
    text-align: center;
    width: calc(33.333% - 20px); /* 减去gap的宽度 */
    box-sizing: border-box;
}
.picture{
	width: 45px; /* 图标的新宽度 */
	height: 45px; /* 图标的新高度 */
    border-radius: 50%;/* 圆形头像 */
	margin-left: 20px;
	border: 1px solid #d0d0d0;
	overflow: hidden; /* 隐藏溢出的部分 */
}
.wrapper{
	object-fit: cover; /* 保持图像比例，裁剪以适应容器 */
	width: 30px; /* 图标的新宽度 */
	height: 30px; /* 图标的新高度 */
	margin-top: 7px;
}
.text {
    margin-top: 10px;
}
.wrapper-button{
	position: relative;
	top: 45px;
	display: flex;
	gap: 10px; /* 可选：按钮之间的间距 */
}
.wrapper-button button{
	width: 100px;
	height: 40px;
	align-items: center; 
	border: #d0d0d0;
	justify-content: center;
	text-align: center; /* 右对齐 */
	background-color: #ffffff;
	font-size: 16px;
	font-weight: bold;
}